import { ListView } from 'antd-mobile';
import React from 'react'

/**
 * 必须传递的属性
 * getData() action中的方法用来获取数据
 * data 用来展示数据的数组
 * Item 函数组件 用来渲染列表的项
 * 例: <ListView data={data} getData = {() => this.getData()} Item={Item}></ListView>
 */
class index extends React.Component {
  constructor(props) {
    super(props);
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => true,
    });

    this.state = {
      dataSource,
      isLoading: true,
      page:1,
    };
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    return {
      dataSource: prevState.dataSource.cloneWithRows(nextProps.data),
      isLoading: false,
    }
  }

  componentDidMount() {
    // 调用action请求数据
    // console.log(this.props.item);
    this.props.getData()
  }

  onEndReached = (event) => {
    //当滑动到底部时执行该方法
    if (this.state.isLoading) {
      return;
    }
    let page = this.state.page + 1;
    this.setState({ isLoading: true, page },()=>{
      // 调用action请求数据
      this.props.getData(page)
    });
  }

  render() {
    return (
      <ListView
        ref={el => this.lv = el}
        dataSource={this.state.dataSource}
        renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
          {this.state.isLoading ? 'Load' : 
          <div class="loader-inner ball-beat">
            <div></div>
            <div></div>
            <div></div>
          </div>}
        </div>)}
        renderRow={this.props.item}
        style={{
          overflow: 'auto',
          height: 'calc(100% - 44px)'
        }}
        pageSize={30}
        onEndReached={()=>this.onEndReached()}
        onEndReachedThreshold={10}
      />
    );
  }
}

export default index;